<template>
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="挂 号 历 史">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goBack">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>
    <!-- 搜索 -->
    <van-search
      v-model="searchTxt"
      show-action
      placeholder="请输入病人姓名"
      @clear="onCancel"
      @search="onSearch"
      @cancel="onCancel"
    />
    <!-- 数据列表区域 -->
    <van-collapse v-model="activeNames" accordion>
      <van-collapse-item
        v-for="(item, index) in PatientList"
        :key="index"
        :title="item.name"
        :label="'性别' + item.sex"
      >
        <p>病人年龄：{{ item.age }}</p>
        <p>病人身份证：{{ item.cardId }}</p>
        <p>联系方式：{{ item.phone }}</p>
        <p>挂号时间：{{ item.createTime }}</p>
        <p v-if="item.state == 0">当前状态：未看病</p>
        <p v-if="item.state == 1">当前状态：看病中</p>
        <p v-if="item.state == 2">当前状态：已看病</p>
        <div class="btn" v-if="item.state == 0 || item.state == 1">
          <van-button type="info" @click="Goprescribe(item.id)"
            >开药</van-button
          >
        </div>
        <div class="btn2" v-if="item.state == 1">
          <van-button type="primary" @click="Finishpre(item.id)"
            >完成看病</van-button
          >
        </div>
        <div class="btn3">
          <van-button
            v-if="item.state == 0 || item.state == 1"
            type="warning"
            @click="addInfor(item.id)"
            >办理入院</van-button
          >
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
// import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  name: "Hospitalization",

  data() {
    return {
      searchTxt: "", //搜索字段
      activeNames: "1",
      PatientList: [], //列表数据
    };
  },

  mounted() {},

  created() {
    this.getList();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "./index",
      });
    },
    //获取列表数据
    getList() {
      this.$http
        .get("outpatient-register", {})
        .then((res) => {
          //console.log(res);
          this.PatientList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //搜索
    onSearch() {
      console.log(this.searchTxt);
    },
    onCancel() {
      console.log("cancel");
    },
    //开药按钮点击
    Goprescribe(id) {
      this.$http
        .get("outpatient-register/seeDoctor", { params: { id: id } })
        .then((res) => {
          console.log(res);
        });
      this.$router.push({
        path: "./Prescribe",
        query: { id },
      });
    },
    //完成看病点击
    Finishpre(id) {
      this.$http
        .delete("outpatient-register/deleteRange", {
          params: {
            id: id,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 500) {
            let msg = res.data.message;
            Toast(msg);
          } else {
            Toast("完成看病");
            this.getList();
          }

          /* setTimeout(() => {
            window.location.reload();
          }, 800); */
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加信息按钮
    addInfor(id) {
      this.$router.push({
        path: "./addInfor",
        query: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  background-color: #fff;
}
#app /deep/ .mint-header-title {
  overflow: initial;
}
.btn2,
.btn3 {
  margin-top: 10px;
}
</style>